<template>
	<div>
		<el-steps :active.sync="activeStep" finish-status="success">
			<el-step title="Step 1" :key="1" />
			<el-step title="Step 2" :key="2" />
			<el-step title="Step 3" :key="3" />
		</el-steps>
		<div v-if="activeStep === 1" class="step-content">
			<el-form>
				<el-form-item label="账号">
					<el-input v-model="account" /></el-form-item>
				<el-button @click="nextStep">下一步</el-button>
			</el-form>
		</div>
		<div v-if="activeStep === 2" class="step-content">
			<el-form>
				<el-form-item label="密码">
					<el-input type="password" v-model="password" /></el-form-item>
				<el-button @click="prevStep">上一步</el-button>
				<el-button @click="nextStep">下一步</el-button>
			</el-form>
		</div>
		<div v-if="activeStep === 3" class="step-content">
			<el-form>
				<el-form-item label="验证码">
					<el-input v-model="Code" /></el-form-item>
				<el-button @click="prevStep">上一步</el-button>
				<el-button type="primary" @click="submit">提交</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const activeStep = ref(1);
const account = ref('');
const password = ref('');
const Code = ref('');

const nextStep = () => {
	activeStep.value++;
};

const prevStep = () => {
	activeStep.value--;
};

const submit = () => {
	// 提交表单逻辑
	console.log('提交表单:', { account, password,Code });
};
</script>
